<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3选择器-层次选择器</title>
    <style>
        #menu span {
            color: #09f;
        }

        #menu>span {
            color: #90f;
        }

        h2+dl {
            color: #f09;
        }

        h2~dl {
            color: #9cf;
        }
    </style>
</head>

<body>
    <div id="menu">
        <h2>全部旅游产品分类</h2>
        <dl>
            <dt>北京周边旅游<span>特价</span></dt>
            <dd><a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a></dd>
        </dl>
        <dl>
            <dt>景点门票</dt>
            <dd><a href="#">名胜</a> <a href="#">暑假</a> <a href="#">乐园</a></dd>
            <dd><a href="#">山水</a> <a href="#">双休</a></dd>
        </dl>
    </div>

    <!-- 
        1.设置#menu下的<span>元素的文字颜色为#09f
        2.设置#menu下的子元素<span>的文字颜色为#90f
        3.设置紧接在<h2>元素后的<dl>元素的文字颜色为#f09
        4.设置<h2>元素之后的所有同辈元素<dl>的文字颜色为#9cf
     -->
</body>

</html>